<template>
    <div class="ArrayView">
        <span class="ArrayItem">
            [
            <a-button type="" size="small" @click="AddArrayEvent(AddOptions)">
                <template #icon>
                    <SettingOutlined />
                </template>
            </a-button>
            <span> // {{ option.description }} ( {{ option.type }} )</span>
        </span>
        <div style="padding: 0 0 0 16px">
            <ViewData v-for="item in Value" :option="Option" />
        </div>
        <a-button size="small" @click="">
            <template #icon>
                <PlusOutlined />
            </template>
        </a-button>
        <span class="ArrayItem">]</span>
    </div>
</template>
<script setup>
import { inject, ref } from "vue";
import ViewData from "./index.vue";
import { PlusOutlined, SettingOutlined } from "@ant-design/icons-vue";
const props = defineProps(["option"]);

const Value = ref([]);

const Option = ref(
    props.option.items || {
        type: "string",
    }
);
const AddArrayEvent = inject("AddArrayEvent");
const AddOptions = (data) => {
    // if (props.option.properties === undefined) {
    //     props.option.properties = reactive({});
    // }
    // props.option.properties[data.key] = {
    //     type: data.type,
    // };
};
</script>
<style lang="less" scoped>
.ArrayView {
    line-height: 32px;
}
</style>
